<template>
  <div class="ranking-container">
    <div class="container">
      <h1 class="page-title">🏆 排行榜</h1>

      <!-- 悬浮添加按钮 -->
      <button class="fab-button" @click="goToAddPerson" title="添加人物">
        <span class="fab-icon">+</span>
      </button>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>正在加载排行榜分类...</p>
      </div>

      <!-- 错误提示 -->
      <div v-else-if="error" class="error-container">
        <p>{{ error }}</p>
        <button @click="fetchRankingCategories" class="retry-button">重试</button>
      </div>

      <!-- 正常内容 -->
      <div v-else>

        
        <div class="ranking-tabs">
          <button v-for="tab in tabs" :key="tab.id" class="tab-button" :class="{ active: activeTab === tab.id }"
            @click="switchTab(tab.id)">
            {{ tab.name }}
          </button>
        </div>

        <div class="ranking-content">

          
          <!-- 动态显示排行榜内容 -->
          <div v-if="rankingData.length > 0" class="ranking-list">
            <div v-for="(item, index) in rankingData" :key="item.id" class="ranking-item"
              @click="goToDetail(activeTab, item.id)">
              <div class="rank-number" :class="{ 'top-three': index < 3 }">
                {{ index + 1 }}
              </div>
              <div class="item-image">
                <img :src="item.avatar || '/src/assets/touxiang.png'" :alt="item.name">
                <div class="image-overlay">🏆</div>
              </div>
              <div class="item-info">
                <h3>{{ item.rankName }}</h3>
                <p>{{ item.intro || item.remark || '暂无介绍' }}</p>
              </div>
              <div class="item-stats">
                <div class="stat-item">
                  <span class="stat-label">{{ getStatLabel() }}</span>
                  <span class="stat-value">{{ getStatValue(item) }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">{{ getSecondStatLabel() }}</span>
                  <span class="stat-value">{{ getSecondStatValue(item) }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-else class="empty-state">
            <p>暂无排行榜数据</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getRankingCategoryPage, getRankingPersonPage } from '@/api/forum'

const router = useRouter()

// 加载状态
const loading = ref(true)
const error = ref(null)

// 跳转到详情页
const goToDetail = (category, id) => {
  // 这里可以根据不同的榜单类型跳转到不同的详情页
  // 暂时跳转到一个通用的排行榜详情页
  router.push(`/ranking/detail/${category}/${id}`)
}

// 跳转到添加人物页面
const goToAddPerson = () => {
  router.push('/ranking/add')
}

// 标签页
const tabs = ref([])

const activeTab = ref('hot')

// 排行榜内容
const rankingData = ref([])

// 获取排行榜分类
const fetchRankingCategories = async () => {
  try {
    loading.value = true
    const response = await getRankingCategoryPage({
      pageNum: 1,
      pageSize: 20
    })

    if (response.code === 200 && response.data && response.data.list) {
      // 将API返回的分类数据转换为标签页格式
      tabs.value = response.data.list.map(category => ({
        id: category.id.toString(),
        name: category.categoryName
      }))

      // 如果有分类数据，默认选中第一个
      if (tabs.value.length > 0) {
        activeTab.value = tabs.value[0].id
        // 获取第一个分类的内容
        await fetchRankingContent(tabs.value[0].id)
      }
    } else {
      // 如果API返回失败，使用默认分类
      tabs.value = [
        { id: 'hot', name: '热度榜' },
        { id: 'animal', name: '畜生榜' },
        { id: 'god', name: '真神榜' },
        { id: 'beauty', name: '美女榜' },
        { id: 'tech', name: '科技榜' },
        { id: 'kol', name: 'KOL榜' },
        { id: 'planner', name: '策划榜' },
        { id: 'platform', name: '平台榜' }
      ]
    }
  } catch (err) {
    console.error('获取排行榜分类失败:', err)
    error.value = '获取排行榜分类失败，请稍后重试'

    // 发生错误时使用默认分类
    tabs.value = [
      { id: 'hot', name: '热度榜' },
      { id: 'animal', name: '畜生榜' },
      { id: 'god', name: '真神榜' },
      { id: 'beauty', name: '美女榜' },
      { id: 'tech', name: '科技榜' },
      { id: 'kol', name: 'KOL榜' },
      { id: 'planner', name: '策划榜' },
      { id: 'platform', name: '平台榜' }
    ]
  } finally {
    loading.value = false
  }
}

// 获取排行榜内容
const fetchRankingContent = async (categoryId) => {
  try {
    loading.value = true
    const response = await getRankingPersonPage({
      categoryId
    })

    console.log('排行榜数据API响应:', response)

    if (response && response.code === 200 && response.data && response.data.list) {
      // 过滤掉状态为1（未审核）的项目，只显示状态为0（已审核）的项目
      rankingData.value = response.data.list.filter(item => item.status === 0)
      
      // 输出第一个元素的数据结构到终端
      if (rankingData.value.length > 0) {
        console.log('排行榜数据结构示例:', JSON.stringify(rankingData.value[0], null, 2))
        
        // 检查是否有评分相关的字段
        const firstItem = rankingData.value[0]
        console.log('评分相关字段检查:')
        console.log('- score:', firstItem.score)
        console.log('- rating:', firstItem.rating)
        console.log('- avgScore:', firstItem.avgScore)
        console.log('- 所有字段:', Object.keys(firstItem))
      }
    } else {
      rankingData.value = []
      console.warn('获取排行榜内容为空或格式不正确')
    }
  } catch (err) {
    console.error('获取排行榜内容失败:', err)
    rankingData.value = []
  } finally {
    loading.value = false
  }
}

// 切换标签页
const switchTab = (tabId) => {
  activeTab.value = tabId
  fetchRankingContent(tabId)
}

// 动态获取统计标签
const getStatLabel = () => {
  return '🔥 热度'
}

// 动态获取统计值
const getStatValue = (item) => {
  // 根据实际API返回的数据结构调整
  return item.viewCount || item.heat || item.hotValue || 0
}

// 动态获取第二个统计标签
const getSecondStatLabel = () => {
  return '⭐ 评分'
}

// 动态获取第二个统计值
const getSecondStatValue = (item) => {
  // 根据实际API返回的数据结构调整
  // API返回的是avgScore字段，而不是score或rating
  return item.avgScore ? item.avgScore : '暂无'
}

// 组件挂载时获取分类数据
onMounted(() => {
  fetchRankingCategories()
})
</script>

<style scoped>
.ranking-container {
  padding: 20px 0;
  min-height: calc(100vh - 70px);
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.page-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 40px;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .ranking-container {
    padding: 12px 0;
  }

  .page-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .page-title::after {
    width: 60px;
    height: 3px;
  }
}

.ranking-tabs {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 30px;
  background: white;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  backdrop-filter: blur(10px);
}

.ranking-tabs::-webkit-scrollbar {
  display: none;
}

.tab-button {
  padding: 12px 20px;
  background: none;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .ranking-tabs {
    margin-bottom: 16px;
    padding: 6px;
    border-radius: 12px;
  }

  .tab-button {
    padding: 10px 16px;
    font-size: 0.875rem;
  }
}

.tab-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.tab-button:hover::before {
  left: 100%;
}

.tab-button.active {
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transform: translateY(-2px);
}

.tab-button:hover:not(.active) {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

.ranking-list {
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(241, 245, 249, 0.8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .ranking-item {
    padding: 16px 12px;
  }

  .ranking-item:hover {
    transform: translateX(4px) scale(1.01);
  }
}

.ranking-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.05), transparent);
  transition: left 0.6s ease;
}

.ranking-item:hover::before {
  left: 100%;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-item:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  transform: translateX(8px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.rank-number {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #64748b;
  font-weight: 800;
  margin-right: 20px;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .rank-number {
    width: 36px;
    height: 36px;
    margin-right: 12px;
    font-size: 1rem;
  }
}

.rank-number.top-three {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #f093fb 100%);
  color: #1a202c;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
  }

  to {
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
  }
}

.rank-number.top-three::after {
  content: '👑';
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 0.8rem;
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-4px);
  }

  60% {
    transform: translateY(-2px);
  }
}

.item-image {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  overflow: hidden;
  margin-right: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  position: relative;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .item-image {
    width: 50px;
    height: 50px;
    margin-right: 12px;
    border-radius: 12px;
  }
}

.item-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ranking-item:hover .item-image::before {
  opacity: 1;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ranking-item:hover .item-image img {
  transform: scale(1.1);
}

.item-info {
  flex: 1;
  margin-right: 20px;
  min-width: 0;
  overflow: hidden;
}

.item-info h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #1e293b;
  transition: color 0.3s ease;
}

.ranking-item:hover .item-info h3 {
  color: #667eea;
}

.item-info p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .item-info {
    margin-right: 6px;
    flex: 1 1 0;
    min-width: 80px;
    max-width: calc(100% - 240px);
  }

  .item-info h3 {
    font-size: 0.95rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .item-info p {
    font-size: 0.8rem;
    -webkit-line-clamp: 1;
  }
}

.item-stats {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  transition: all 0.3s ease;
  min-width: 60px;
}

.ranking-item:hover .stat-item {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  transform: translateY(-2px);
}

.stat-label {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-bottom: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  transition: color 0.3s ease;
}

.ranking-item:hover .stat-value {
  color: #667eea;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .item-stats {
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
  }

  .stat-item {
    padding: 6px 6px;
    min-width: 44px;
    border-radius: 8px;
  }

  .stat-label {
    font-size: 0.6rem;
    margin-bottom: 2px;
    white-space: nowrap;
  }

  .stat-value {
    font-size: 0.8rem;
    white-space: nowrap;
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(102, 126, 234, 0.2);
  border-top: 5px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.retry-button {
  margin-top: 20px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retry-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  color: #64748b;
  font-size: 1.1rem;
}

/* 移动端适配 */
@media (max-width: 768px) {

  .loading-container,
  .error-container,
  .empty-state {
    padding: 40px 16px;
    border-radius: 16px;
  }

  .loading-spinner {
    width: 40px;
    height: 40px;
    border-width: 4px;
  }

  .empty-state {
    font-size: 0.95rem;
  }
}

/* 悬浮添加按钮 */
.fab-button {
  position: fixed;
  bottom: 90px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}

.fab-button:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.6);
}

.fab-button:active {
  transform: scale(0.95) rotate(90deg);
}

.fab-icon {
  font-size: 2rem;
  color: white;
  font-weight: 300;
  line-height: 1;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .fab-button {
    bottom: 80px;
    right: 20px;
    width: 56px;
    height: 56px;
  }

  .fab-icon {
    font-size: 1.8rem;
  }
}
</style>